<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>艺龙</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .box {
        width: 1200px;
        height: 500px;
        margin: 50px auto;
        /* background-color: aqua; */
      }
      .textfont {
        width: 30px;
        margin: 0 auto;
        font-size: 30px;
        color: #fff;
      }
      .bg {
        width: 100%;
        height: 100%;
      }
      .box ul {
        list-style: none;
        height: 260px;
        /* background-color: red; */
      }
      .box ul li {
        float: left;
        width: 12.5%;
        height: 260px;
        transition: width 0.5s ease 0s;
      }
      .box ul li a {
        text-decoration: none;
        position: relative;
        width: 30px;
        height: 260px;
      }

      .box ul li a .bg1 {
        background: url(https://file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150422_ifold1.jpg)
          center center / cover no-repeat;
      }
      .box ul li a .bg2 {
        background: url(https://file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150120_ifold3.jpg)
          center center / cover no-repeat;
      }
      .box ul li a .bg3 {
        background: url(https://file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150120_ifold4.jpg)
          center center / cover no-repeat;
      }
      .box ul li a .bg4 {
        background: url(https://file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150120_ifold5.jpg)
          center center / cover no-repeat;
      }
      .box ul li a .bg5 {
        background: url(https://file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150120_ifold6.jpg)
          center center / cover no-repeat;
      }
      .box ul li a .bg6 {
        background: url(https://file.40017.cn/js40017cnproduct/cn/h/elong_pc/common/pic/20150120_ifold7.jpg)
          center center / cover no-repeat;
      }
      .box ul li:nth-child(1):hover {
        width: 37.5%;
      }

      .box ul li:nth-child(2):hover {
        width: 37.5%;
      }

      .box ul li:nth-child(3):hover {
        width: 37.5%;
      }
      .box ul li:nth-child(4):hover {
        width: 37.5%;
      }
      .box ul li:nth-child(5):hover {
        width: 37.5%;
      }
      .box ul li:nth-child(6):hover {
        width: 37.5%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>
          <a href="#">
            <div class="bg1 bg"><h4 class="textfont">园林酒店</h4></div>
          </a>
        </li>
        <li>
          <a>
            <div class="bg2 bg"><h4 class="textfont">设计师酒店</h4></div>
          </a>
        </li>
        <li>
          <a>
            <div class="bg3 bg"><h4 class="textfont">青年旅舍</h4></div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="bg4 bg"><h4 class="textfont">特色客栈</h4></div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="bg5 bg"><h4 class="textfont">海岛酒店</h4></div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="bg6 bg"><h4 class="textfont">海外温泉</h4></div>
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>
